import * as d3 from 'd3'
import jobs from '../assets/shenzhen.json'
// import jobs from '../assets/chengdu.json'

const getNumber = function (str) {
  return Number(/\d*/.exec(str)[0])
}

const getFormattedArray = function (arr) {
  const obj = {}
  const ret = []

  for (let i = 0; i < arr.length; i++) {
    const salary = arr[i].salary.toUpperCase()
    if (obj[salary]) {
      obj[salary]++
    } else {
      obj[salary] = 1
    }
  }

  for (let k in obj) {
    const tmp = k.split('-')
    ret.push({
      min: getNumber(tmp[0]) * 1000,
      max: getNumber(tmp[1]) * 1000,
      number: Number(obj[k])
    })
  }

  ret.sort((a, b) => {
    let rt = b.min - a.min
    if (rt === 0) {
      rt = b.max - a.max
    }
    return rt
  })

  return ret
}

const getAvg = function (arr) {
  let sumMin = 0
  let sumMax = 0
  let num = 0

  for (let i = 0; i < arr.length; i++) {
    sumMin += arr[i].min * arr[i].number
    sumMax += arr[i].max * arr[i].number
    num += arr[i].number
  }

  console.log(sumMin, sumMax, num)

  return {
    min: parseInt(sumMin / num),
    max: parseInt(sumMax / num)
  }
}

const getColor = (function () {
  const compute1 = d3.interpolate('orange', 'red')
  const compute2 = d3.interpolate('red', 'purple')
  const compute3 = d3.interpolate('purple', 'blue')

  const n1 = 20, n2 = 30, n3 = 100

  return function (d) {
    if (d.number < n1) {
      return compute1(d.number / n1)
    } else if (d.number < n2) {
      return compute2((d.number - n1) / (n2 - n1))
    } else if (d.number < n3) {
      return compute3((d.number - n2) / (n3 - n2))
    } else {
      return 'blue'
    }
  }
})()

const draw = function (arr) {
  const width = 1600,
    height = 500,
    padding = {
      left: 30,
      right: 30,
      top: 30,
      bottom: 30
    }

  const svg = d3.select('.content')
    .append('svg')
    .attr('width', width)
    .attr('height', height)

  // 比例尺
  const xScale = d3.scaleLinear()
    .domain([0, d3.max(arr, d => d.max)])
    .range([0, width - padding.right - padding.left])

  const yScale = d3.scaleLinear()
    .domain([0, d3.max(arr, d => d.number)])
    .range([height - padding.top - padding.bottom, 0])

  // 添加矩形
  svg.selectAll('rect')
    .data(arr)
    .enter()
    .append('rect')
    .attr('transform', `translate(${padding.left}, ${padding.top})`)
    .attr('x', d => xScale(d.min))
    .attr('y', d => yScale(d.number))
    .attr('fill', d => getColor(d))
    .attr('height', d => height - padding.top - padding.bottom - yScale(d.number))
    .attr('width', d => xScale(d.max - d.min))

  // 添加圆形
  /*
  svg.selectAll('circle')
    .data(arr)
    .enter()
    .append('circle')
    .attr('transform', `translate(${padding.left}, ${padding.top + height / 2})`)
    .attr('cx', d => xScale(d.min + (d.max - d.min) / 2))
    .attr('cy', d => 0)
    .attr('r', d => xScale(d.max - d.min) / 2)
    .attr('fill', d => getColor(d))
  */


  // 坐标轴
  const xAxis = d3.axisBottom()
    .scale(xScale)
  svg.append('g')
    .attr('transform', `translate(${padding.left}, ${height - padding.bottom})`)
    .call(xAxis)

  const yAxis = d3.axisLeft()
    .scale(yScale)
  svg.append('g')
    .attr('transform', `translate(${padding.left}, ${padding.top})`)
    .call(yAxis)
}

function showTableData (jobs) {
  // 總數
  document.querySelector('#td1').innerText = jobs.length

  // 總平均工資
  const list = getFormattedArray(jobs)
  const avg = getAvg(list)
  document.querySelector('#td2').innerText = `${avg.min} ~ ${avg.max}`

  // 去掉薪資最高的10組
  const listlow = list.slice(10)
  const avglow = getAvg(listlow)
  document.querySelector('#td3').innerText = `${avglow.min} ~ ${avglow.max}`

  // 去掉薪資最高最低的10組
  const list2 = list.slice(10, -10)
  const avg2 = getAvg(list2)
  document.querySelector('#td4').innerText = `${avg2.min} ~ ${avg2.max}`

  // 1 ~ 3年平均薪資
  const jobs3 = jobs.filter(d => d.workYear === '1-3年')
  const list3 = getFormattedArray(jobs3)
  const avg3 = getAvg(list3)
  document.querySelector('#td5').innerText = `${avg3.min} ~ ${avg3.max}`

  // 5 ~ 10年
  const jobs4 = jobs.filter(d => d.workYear === '5-10年')
  const list4 = getFormattedArray(jobs4)
  const avg4 = getAvg(list4)
  document.querySelector('#td6').innerText = `${avg4.min} ~ ${avg4.max}`
}

showTableData(jobs)
const list = getFormattedArray(jobs)
console.log(list)
draw(list)
